<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>美食</title>
    <script src="./assets/flexible/flexible.debug.js"></script>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/meishi.css">
    <link rel="stylesheet" href="assets/swiper/css/swiper.min.css">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>

<body>

    <nav class="swiper-container tab-nav">
        <div class="swiper-wrapper">
            <div class="swiper-slide zhuanshu">专属推荐</div>
            <div class="swiper-slide sh">膳食平衡</div>
            <div class="swiper-slide shihui">实惠套餐</div>
            <div class="swiper-slide zbu">滋补养颜</div>
            <div class="swiper-slide kye">狂野食肉</div>
            <div class="swiper-slide jianfei">减肥塑形</div>
            <!-- <div class="swiper-slide bord">其他</div> -->
        </div>
    </nav>
    <main class="main">
        <div class="swiper-container tab-cont">
            <div class="swiper-wrapper">
                <div class="swiper-slide zhuanshu box">
                    <!-- <div class="HotFoodShop_t">
                        <img src="https://fuss10.elemecdn.com/8/54/ece2a80c1e828b7b4c4b9c789ad42jpeg.jpeg?imageMogr/format/webp/thumbnail/!42x42r/gravity/Center/crop/42x42/" alt="">
                        <h3>北喜日式料理（SOGO庄胜店）</h3>
                        <span class="HotFoodShop_q">¥20起送 / 配送费¥5</span>
                    </div> -->


                    <script type="text/html" id="template">
                        {{each str v}}
                        <div class="HotFoodShop_t">
                            <img src="{{v.img}}" alt="">
                            <h3>{{v.h3}}</h3>
                            <span class="HotFoodShop_q">{{v.sp}} </span>
                        </div>
                        <div class="ulty">


                            <div class="list">
                                <p class="img1"> <img src=" {{v.img}}" alt=""> </p>
                                <p class="h21">{{v.h2}}</p>
                                <p class="p">￥{{v.p}}</p>
                                <p class="p1">去看看</p>
                            </div>
                            <div class="list">
                                <p class="img1"> <img src=" {{v.img2}}" alt=""> </p>
                                <p class="h21">{{v.h1}}</p>
                                <p class="p">￥{{v.p1}}</p>
                                <p class="p1">去看看</p>
                            </div>
                            <div class="list">
                                <p class="img1"> <img src=" {{v.img3}}" alt=""> </p>
                                <p class="h21">{{v.h4}}</p>
                                <p class="p">￥{{v.p3}}</p>
                                <p class="p1">去看看</p>
                            </div>
                        </div>
                        {{/each}}
                    </script>





                </div>
                <div class="swiper-slide sh   box">

                </div>
                <div class="swiper-slide shihui   box">

                </div>
                <div class="swiper-slide zbu   box">

                </div>
                <div class="swiper-slide kye   box">

                </div>
                <div class="swiper-slide jianfei   box">

                </div>
                <!-- <div class="swiper-slide">

                </div> -->
            </div>
        </div>
    </main>











    <script src="assets/jquery/jquery-3.2.1.min.js"></script>
    <script src="js/index.js"></script>
    <script src="assets/swiper/js/swiper.min.js"></script>
    <script src="assets/artTemplate/template-web.js"></script>
    <script src="./assets/jquery/jquery-3.2.1.js"></script>

    <script src="./font/iconfont.js"></script>
    <script>
        jQuery(function($) {

            var swiper1 = new Swiper('.tab-nav', {
                slidesPerView: 4,
                freeMode: true,
                freeModeMomentumRatio: 0.5,
            })

            swiper1.container.on("click", function() {

                var slide = swiper1.slides.eq(swiper1.clickedIndex);
                // console.log(slide);
                $('.active').removeClass("active");
                slide.addClass("active");




                var swiperHalf = swiper1.width / 2;
                var maxTranslate = swiper1.maxTranslate();
                var maxWidth = -maxTranslate + swiperHalf;

                var slideLeft = slide[0].offsetLeft;
                var slideWidth = slide[0].clientWidth;
                var slideCenter = slideLeft + slideWidth / 2;
                // 被点击slide的中心点

                swiper1.setWrapperTransition(300)

                if (slideCenter < swiperHalf) {
                    swiper1.setWrapperTranslate(0);
                } else if (slideCenter > maxWidth) {
                    swiper1.setWrapperTranslate(maxTranslate);
                } else {
                    var translate = slideCenter - swiperHalf;
                    swiper1.setWrapperTranslate(-translate);
                }

                swiper2.slideTo(swiper1.clickedIndex);
            })

            var swiper2 = new Swiper('.tab-cont', {
                onSlideChangeStart: function(swiper) {
                    swiper1.clickedIndex = swiper.activeIndex;
                    swiper1.slides.eq(swiper.activeIndex).trigger('click');
                }
            })

        })
    </script>
    <script src="js/meishi.js"></script>
</body>

</html>